<template>
  <div>
    <el-row>
      <el-col :span="12">
        <SmoothedLineChart
            class="background"
            title="题库正确率"
            width="100%"
            :x-data="smoothedLineChart.xData"
            :series-data="smoothedLineChart.seriesData"></SmoothedLineChart>
      </el-col>
      <el-col :span="12" style="padding-left: 40px">
        <DoughnutChart
            class="background"
            title="题目答题总统计"
            width="100%"
            :series-data="doughnutChart.seriesData"></DoughnutChart>
      </el-col>
    </el-row>
    <el-row style="margin-top: 20px">
      <el-col :span="12">
        <QuestionDataLineChart
            class="background"
            title="近7次提交题目数据"
            width="100%"
            :x-data="xQuestionData.modifyTimeList"
            :correct-data="xQuestionData.correctData"
            :uncertain-data="xQuestionData.uncertainData"
            :mistake-data="xQuestionData.mistakeData"></QuestionDataLineChart>
      </el-col>
      <el-col :span="12" style="padding-left: 40px">
        <DifficultyBar
            class="background"
            title="难易度问答统计"
            width="100%"
            :x-data="difficultyData.xData"
            :correct-data="difficultyData.correctData"
            :uncertain-data="difficultyData.uncertainData"
            :mistake-data="difficultyData.mistakeData"></DifficultyBar>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import DifficultyBar from '@/components/echarts/DifficultyBar'
import DoughnutChart from '@/components/echarts/DoughnutChart'
import SmoothedLineChart from '@/components/echarts/SmoothedLineChart'
import { get } from '@/plugins/axios'
import QuestionDataLineChart from "@/components/echarts/QuestionDataLineChart";

export default {
  name: "dataAnalyze1",
  components: {
    DifficultyBar,
    DoughnutChart,
    SmoothedLineChart,
    QuestionDataLineChart
  },
  created() {
    this.getAllCount()
    this.getBankCorrect()
    this.getDifficultData()
    this.getXQuestionData()
  },
  data() {
    const module = '/userQuestionData'
    return {
      userId: this.$store.getters.GET_ACCOUNT.id,
      uri: {
        allCount: module + '/allCount',
        bankCorrect: module + '/bankCorrect',
        difficultyData: module + '/difficultyData',
        xQuestionData: module + '/xQuestionData'
      },
      difficultyData: {
        xData: [],
        correctData: [],
        uncertainData: [],
        mistakeData: []
      },
      doughnutChart: {
        seriesData: []
      },
      smoothedLineChart: {
        xData: [],
        seriesData: []
      },
      xQuestionData: {
        count: 7,
        modifyTimeList: [],
        correctData: [],
        uncertainData: [],
        mistakeData: []
      }
    }
  },
  methods: {
    getAllCount() {
      const params = {
        userId: this.userId
      }
      get(this.uri.allCount, params, response => {
        if (response.code === 200) {
          this.doughnutChart.seriesData.push({
            value: response.data.correctCount,
            name: '正确数'
          })
          this.doughnutChart.seriesData.push({
            value: response.data.uncertainCount,
            name: '不确定数'
          })
          this.doughnutChart.seriesData.push({
            value: response.data.mistakeCount,
            name: '错误数'
          })
        }
      })
    },
    getBankCorrect() {
      const params = {
        userId: this.userId
      }
      get(this.uri.bankCorrect, params, response => {
        if (response.code === 200) {
          for (const item in response.data.bankNameList) {
            this.smoothedLineChart.xData.push(response.data.bankNameList[item])
          }
          for (const item in response.data.correctList) {
            this.smoothedLineChart.seriesData.push(response.data.correctList[item])
          }
        }
      })
    },
    getDifficultData() {
      const params = {
        userId: this.userId
      }
      get(this.uri.difficultyData, params, response => {
        if (response.code === 200) {
          this.difficultyData.xData = response.data.difficultyList
          this.difficultyData.correctData = response.data.correctList
          this.difficultyData.uncertainData = response.data.uncertainList
          this.difficultyData.mistakeData = response.data.mistakeList
        }
      })
    },
    getXQuestionData() {
      const params = {
        userId: this.userId,
        count: this.xQuestionData.count
      }
      get(this.uri.xQuestionData, params, response => {
        if (response.code === 200) {
          this.xQuestionData.modifyTimeList = response.data.modifyTimeList
          this.xQuestionData.correctData = response.data.correctList
          this.xQuestionData.uncertainData = response.data.mistakeList
          this.xQuestionData.mistakeData = response.data.uncertainList
        }
      })
    }
  }
}
</script>

<style scoped lang="less">
.background {
  padding: 5px 10px 20px 10px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, .12), 0 0 6px rgba(0, 0, 0, .04);
  background: white;
}
</style>